<!--
 *
 * @author 凡墙<jihaoju@qq.com>
 * @date 2019/11/12
 * @description
 -->
<template>
  <section>
    <div class="flex flex-col flex-center bg-color-white" ref="loginOuter">
      <div class="flex flex-col login-wrapper">
        <div class="flex flex-row flex-center mt10">
          <img :src="logo" class="logo"/>
        </div>
        <div class="flex flex-col mt10 border-right-gray border-left-gray border-top-gray border-bottom-gray">
          <van-field
            v-model="userName"
            label="用户名"
            required
            placeholder="请输入用户名">
          </van-field>

          <van-field
            v-model="password"
            label="密码"
            type="password"
            required
            placeholder="请输入密码">
          </van-field>

          <div class="pd10">
            <van-checkbox v-model="remember">记住账号</van-checkbox>
          </div>
        </div>

        <div class="mt10 bg-color-white text-center btn-submit">
          <van-button color="#EE3D11" size="large" :loading="submitting" loading-text="登录中" @click="login">登录
          </van-button>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import Vue from 'vue';
  import {Cell, CellGroup, Field, Button, Toast, Checkbox, CheckboxGroup} from 'vant';

  Vue.use(Cell).use(CellGroup).use(Field).use(Button).use(Toast).use(Checkbox).use(CheckboxGroup);
  import {userLoginUri} from '../../common/api';

  const logo = require('../../assets/images/logo.png');

  export default {
    components: {
      [CellGroup.name]: CellGroup,
      [Cell.name]: Cell,
      [Field.name]: Field,
      [Button.name]: Button,
      [Toast.name]: Toast
    },
    data() {
      return {
        logo: logo,
        userName: '',
        password: '',
        clientHeight: '',
        submitting: false,
        remember: false
      }
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    methods: {
      changeFixed(clientHeight) {
        this.$refs.loginOuter.style.height = clientHeight + 'px';
      },
      login() {
        if (this.userName.length == 0 || this.password.length == 0) {
          Toast('用户名和密码不能为空');
          return
        }
        const that = this;
        const url = userLoginUri + '?username=' + encodeURIComponent(this.userName) + '&password=' + this.password;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            if(that.remember) {
              window.localStorage.setItem('access_token', data.user.access_token);
            } else {
              window.localStorage.removeItem('access_token');
            }
            that.GLOBAL.userInfo = data.user;
            that.EventBus.$emit('OnUserLogined', null);
            that.$router.push({name: 'Main'});
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}`          //document.body.clientWidth;
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    }
  }
</script>
<style scoped>
  .login-wrapper {
    width: 80%;
  }

  .login-wrapper .logo {
    height: 90px;
    width: 90px;
    border-radius: 45px;
  }
</style>
